<script setup lang="ts">
import operApi from '@/api/oper.ts'
import {onMounted, ref, h, defineAsyncComponent} from "vue";
import {
  CheckOutlined,
  CommentOutlined, FileOutlined,
  FormOutlined, HeartOutlined,
  PlusCircleOutlined,
} from "@ant-design/icons-vue";
import router from "@/router";
const iconMap = {
  'FileOutlined': FileOutlined,
  'PlusCircleOutlined': PlusCircleOutlined,
  'HeartOutlined': HeartOutlined,
  'FormOutlined': FormOutlined,
  'CommentOutlined': CommentOutlined,
  'CheckOutlined' : CheckOutlined
};
const items = ref([]);
onMounted(async () => {
  const result = await operApi.getLately();
  items.value = result.data.map(item => ({
    ...item,
    icon: h(iconMap[item.icon]) // 将字符串图标名称转换为图标组件
  }));
});

// 点击每个活动
const changHanle = (index:number) => {
  // console.log(items.value[index].url)
  // router.push({path: items.value[index].url})
  const url = items.value[index].url;
  if (url) {
    window.location.href = url
  }
};
</script>

<template>
  <div class="activity">
    <a-steps
        :current="999"
        @change="changHanle"
        direction="vertical"
        :items="items"
    ></a-steps>
  </div>
</template>
<style scoped>
.activity{
  position: relative;
}
::v-deep(.ant-steps-item-content .ant-steps-item-title .ant-steps-item-subtitle){
  position: absolute;
  right: -600px;
}
</style>
